<template>
  <div>
    <el-dialog
      :visible.sync="tableShow"
      @close="handleClickDeal('cancel')"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :title="title"
      append-to-body
    >
      <!-- 工具栏  -->
      <div class="flexBetween" v-show="postDetail.type !== 'candidateGroups'">
        <el-form :inline="true">
          <el-form-item label="账户">
            <el-input v-model="search.account"></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="search.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="search el-icon-search" type="primary">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="reset el-icon-refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格  -->
      <el-table
        :data="users"
        highlight-current-row
        ref="multipleTable"
        v-show="postDetail.type !== 'candidateGroups'"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="account" label="账户"/>
        <el-table-column prop="name" label="昵称"/>
      </el-table>
      <el-table
        v-show="postDetail.type === 'candidateGroups'"
        ref="table"
        highlight-current-row
        style="width: 100%;"
        :data="roles"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column :reserve-selection="true" type="selection" width="55"/>
        <el-table-column prop="data.name" label="角色名称" :show-overflow-tooltip="true"/>
        <el-table-column prop="data.code" label="角色代码"/>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleClickDeal('cancel','form')"> 取 消
        </el-button>
        <el-button size="medium" type="primary" @click="handleClickDeal('submit')">
          保 存
        </el-button>
      </div>

      <!--分页组件-->
      <el-pagination
        v-show="postDetail.type !== 'candidateGroups'"
        style="margin-top: 15px"
        layout="total, prev, pager, next, sizes"
        :page-size="search.pageSize"
        :total="search.total"
        :current-page="search.pageNo+1"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
  import {allList as userList} from '@/api/system/user'
  import role from '@/api/system/role'

  export default {
    name: "user-detail",
    props: {
      postDetail: {
        type: Object,
        default: {
          show: false
        }
      }
    },
    computed: {
      title() {
        if (this.postDetail.type !== 'candidateGroups') {
          return '用户选择'
        } else {
          return '角色选择'
        }
      }
    },
    watch: {
      postDetail(value) {
        this.tableShow = value.show
        // 初始化表格数据
        this.initUser()
        // 根据参数判断表格选择回显或清空表格选择
        if (value.params) {
          this.clearSelect = false
          this.selectValue = value.params.split(",")
        } else {
          this.clearSelect = true
          console.log('clearSelect', this.clearSelect)
        }
      }
    },
    data() {
      return {
        tableShow: false,
        search: {
          account: '',
          name: '',
          pageSize: 10,
          total: 10,
          pageNo: 0
        },
        users: [],
        roles: [],
        // 候选人员已选择
        values: [],
        valueLabels: [],
        // 候选角色已选择
        otherValues: [],
        otherValueLabels: [],
        //指定人员已选择
        assigneeValues: [],
        assigneeValueLabels: [],
        // 数据表格选择回显数组
        selectValue: [],
        // 清空表格选择
        clearSelect: false,
      }
    },
    methods: {
      handleClickDeal(type) {
        switch (type) {
          // 取消，关闭窗口
          case 'cancel':
            this.tableShow = false
            this.reset()
            break
          // 保存
          case 'submit':
            this.assigneeValues = []
            this.assigneeValueLabels = []
            this.values = []
            this.valueLabels = []
            this.otherValues = []
            this.otherValueLabels = []
            if (this.postDetail.type === 'assignee') {
              let arr = this.$refs.multipleTable.selection
              if (arr) {
                arr.forEach((item) => {
                  if (item.id) {
                    this.assigneeValues.push(item.id)
                    this.assigneeValueLabels.push(item.name)
                  }
                })
              } else {
                this.assigneeValues = []
                this.assigneeValueLabels = []
              }
            }
            // 候选人员
            else if (this.postDetail.type === 'candidateUsers') {
              let arr = this.$refs.multipleTable.selection
              if (arr) {
                arr.forEach((item) => {
                  if (item.id) {
                    this.values.push(item.id)
                    this.valueLabels.push(item.name)
                  }
                })
              } else {
                this.values = []
                this.valueLabels = []
              }
            } // 候选角色
            else if (this.postDetail.type === 'candidateGroups') {
              let arr = this.$refs.table.selection
              if (arr) {
                arr.forEach((item) => {
                  if (item.id) {
                    this.otherValues.push(item.id)
                    this.otherValueLabels.push(item.name)
                  }
                })
              } else {
                this.otherValues = []
                this.otherValueLabels = []
              }
            }
            this.update(this.postDetail.type)
            this.reset()
            this.tableShow = false
            break
          // 删除
          case 'delete':
            break
        }
      },
      // 表格数据初始化
      async initUser() {
        if (this.postDetail.type === 'candidateGroups') {
          let params = {}
          await role.getAll(params).then(res => {
            this.roles = res.data
          })
        } else {
          await userList(this.search).then(res => {
            this.users = res.data
          })
        }

        this.$nextTick(() => {
          // 回显数据有值遍历，勾选
          if (!this.clearSelect) {
            this.selectValue.forEach(item => {
              this.users.forEach((value, index) => {
                if (value.account === item) {
                  this.$refs.multipleTable.toggleRowSelection(this.users[index])
                } else if (value.id === item) {
                  this.$refs.multipleTable.toggleRowSelection(this.users[index])
                }
              })
            })
            this.selectValue.forEach(item => {
              this.roles.forEach((value, index) => {
                if (value.id === item) {
                  this.$refs.table.toggleRowSelection(value)
                }
                if (value.children) {
                  value.children.forEach((child, num) => {
                    if (child.id === item) {
                      this.$refs.table.toggleRowExpansion(value, true)
                      this.$refs.table.toggleRowSelection(child)
                    }
                  })
                }

              })
            })
            this.$refs.table.selection
          } else {
            // 清空选择
            this.$refs.multipleTable.clearSelection();
            this.$refs.table.clearSelection();
          }
        })

      },
      update(type) {
        const param = {}
        if (type === 'assignee') {
          // param[this.postDetail.type] = this.values.join(',')
          param[this.postDetail.type] = [...new Set(this.assigneeValues)].join(',') // 去重
          param["label"] = [...new Set(this.assigneeValueLabels)].join(',')
          this.$emit('updateProperties', param)
        }
        else if (type === 'candidateUsers') {
          // param[this.postDetail.type] = this.values.join(',')
          param[this.postDetail.type] = [...new Set(this.values)].join(',') // 去重
          param["label"] = [...new Set(this.valueLabels)].join(',')
          this.$emit('updateProperties', param)
        } else {
          param[this.postDetail.type] = [...new Set(this.otherValues)].join(',')
          param["label"] = [...new Set(this.otherValueLabels)].join(',')
          this.$emit('updateProperties', param)
        }
      },
      reset() {
        this.search.account = ''
        this.search.name = ''
        this.$refs.multipleTable.clearSelection();
        this.$refs.table.clearSelection();
      }
    },
    updated() {

    },
  }
</script>

<style lang="scss" scoped>
  ::v-deep {
    .el-dialog {
      border-radius: 3px;
    }
    .el-dialog__body {
      padding: 30px;
    }

  }
</style>
